<template>
  <div id="test-add" style="height:160px;"></div>
</template>
<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
export default {
  name: 'testAdd',
  components: {},
  watch: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {
    var myChart = echarts.init(document.getElementById('test-add'))
    // 2. 指定配置和数据
    var option = {
      color: ['#5ab1ef', '#b6a2de', '#2ec7c9'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        },
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        top: 10,
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#ccc', '#f00', '#455'],
          width: 1,
          type: 'solid'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '', '周三', '', '周五', '', '周日'],
          axisTick: {
            alignWithLabel: true,
            // 把x轴的刻度隐藏起来
            show: true
          },
          axisLabel: {
            color: '#4c9bfd'
          },
          // x轴这条线的颜色样式
          axisLine: {
            lineStyle: {
              color: '#279cd4'
              // width: 3
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitArea: {
            show: true
          },
          axisTick: {
            alignWithLabel: true
            // 把y轴的刻度隐藏起来
            // show: true
          },
          axisLabel: {
            color: '#36a2d7'
          },

          // y轴这条线的颜色样式
          axisLine: {
            show: true,
            lineStyle: {
              color: '#279cd4'
              // width: 3
            }
          }
        }
      ],
      // series: [
      //   {
      //     name: '直接访问',
      //     type: 'bar',
      //     barWidth: '60%',
      //     data: [200, 150, 600, 1000, 1180, 1000, 650]
      //   }
      // ]
      series: [
        {
          name: '单选题',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [79, 52, 200, 334, 390, 330, 220]
        },
        {
          name: '多选题',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [80, 52, 200, 334, 390, 330, 220]
        },
        {
          name: '简答',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [30, 52, 200, 334, 390, 330, 220]
        }
      ]
    }
    // 3. 把配置给实例对象
    myChart.setOption(option)
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function() {
      // 让我们的图表调用 resize这个方法
      myChart.resize()
    })
  },
  methods: {}
}
</script>
<style lang="less" scoped>
</style>
